<template>
  <div
    style="float: left;background-color: rgba(9,99,73,0.14);margin-top: -50px;width: 100%">
    <div
      style="float: left;background-color: white;border: 2px solid white;border-radius:20px;margin-left: 150px;margin-top: 60px;width: 1200px;height: 350px;">
      <div
        style="float: left;border-radius:20px;margin-top:-10px;margin-left: 1px;width: 1200px ;height:40px;border-bottom: 1px solid rgba(204,204,204,0.55) ;background-color: rgba(204,204,204,0.92)">
        <div style="float: left;margin-top: -10px;margin-left: 15px">
          <p style="font-family: 黑体;font-size: 20px">属性筛选(共有12种商品)</p>
        </div>
      </div>
      <div
        style="background-color: white;float: left;margin-top:20px;margin-left: 10px;width: 1100px;height:55px;border-bottom: 1px solid rgba(204,204,204,0.55) ">
        <el-row>
          <el-col span="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌</el-col>
          <el-col span="5">
            <el-button type="" @click="nik()"><img width="50px" height="20px" src="../../../assets/nike.jpg">
            </el-button>
          </el-col>
          <el-col span="5">
            <el-button type="" @click="adid()"><img width="50px" height="20px" src="../../../assets/adidas.jpg">
            </el-button>
          </el-col>
          <el-col span="5">
            <el-button type="" @click="Li()"><img width="50px" height="20px" src="../../../assets/Li-Ning.jpg">
            </el-button>
          </el-col>
          <div style="margin-left: 1000px;margin-top: 0px">
            <el-button type="" v-on:click="">更多+</el-button>
          </div>
        </el-row>

      </div>
      <div
        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 1px solid rgba(204,204,204,0.55) ">
        <el-row>
          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码</el-col>
          <el-col span="3">36</el-col>
          <el-col span="3">37</el-col>
          <el-col span="3">38</el-col>
          <el-col span="3">38</el-col>
          <el-col span="3">38</el-col>
          <div style="margin-left: 1000px;margin-top: -20px">
            <el-button type="" v-on:click="">更多+</el-button>
          </div>
        </el-row>
      </div>
      <div
        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 1px solid rgba(204,204,204,0.55) ">
        <el-row>
          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格</el-col>
          <el-col span="3">100-200</el-col>
          <el-col span="3">200-300</el-col>
          <el-col span="3">300-400</el-col>
          <el-col span="3">400-500</el-col>
          <el-col span="3">500-600</el-col>
          <div style="margin-left: 1000px;margin-top: -20px">
            <el-button type="" v-on:click="">更多+</el-button>
          </div>
        </el-row>
      </div>
      <div
        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 0.5px solid rgba(204,204,204,0.55) ">
        <el-row>
          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材质</el-col>
          <el-col span="3">布</el-col>
          <el-col span="3">超纤布</el-col>
          <el-col span="3">皮质</el-col>
          <el-col span="3">网眼布</el-col>
          <el-col span="3">合成材料</el-col>
          <div style="margin-left: 1000px;margin-top: -20px">
            <el-button type="" v-on:click="">更多+</el-button>
          </div>
        </el-row>
      </div>
    </div>
    <div
      style="background-color: white;width: 1200px;border: 2px solid white;border-radius:20px;margin-left: 150px;margin-top: 425px;height: auto">
      <el-row>
        <el-col>
          <el-card body-style="{ padding:'0px' }" class="goods" v-for="(index) in goods " shadow="hover" :key="n">
            <a v-on:click="goodsMsg(index)">
              <img :src="index.img" alt="" class="goodsImg">
              <div class="goodsName">{{index.goods}}</div>
              <div class="goodsBrand">{{index.brand}}</div>
              <div class="goodsPrice">￥{{index.price}}</div>
            </a>
            <el-button style="margin-left: 20px" type="warning" plain>直接购买</el-button>
            <el-button type="warning" class="el-icon-shopping-cart-2">加入购物车</el-button>
          </el-card>
        </el-col>
      </el-row>
      <div>
        <img src="../../../assets/end.png" style="width: 800px;height: 70px;margin-left:27%">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "WomanSlipper",
    data() {
      return {
        goods:[],
      }
    },
    mounted() {
      this.womanSport();
    },
    methods:{
      womanSport(){
        this.$http.post('http://localhost:8888/shopping/woman',{type:3},{emulateJSON:true}).then(res=>{
          this.goods = res.data.data;
          console.log(goods);
        })
      }
    }
  }
</script>


<style>
  .goods {
    float: left;
    border: 0px solid #000;
    margin: 35px;
    width: 330px;
    height: 450px;
    border-radius: 23px;
  }

  .goodsImg {
    /*border: 1px solid ;*/
    float: left;
    margin-left: -19px;
    margin-top: -20px;
    width: 330px;
    height: 300px;
    border-radius: 23px;



  }

  .goodsName {
    /*border: 3px solid #d23030;*/
    margin-left: 40px;
    width: 270px;

  }

  .goodsBrand {
    /*border: 3px solid #6acb2e;*/
    margin-left: 90px;
    width: 70px;

  }

  .goodsPrice {
    /*border: 3px solid #3071d2;*/
    color: #ff3213;
    font-size: 20px;
    width: 70px;
  }
</style>

